layui.use(['layer', 'laydate'], function (layer, laydate) {

    let app = new Vue({
        el: "#recordApp",
        data: {
            isHit: false,
            downDetails: false,
            record: {},
            timeOutEvent: 0,//定时器
            address: ""
        },
        methods: {
            getAddress() {
                let that = this;
                layui.use(['layer'], function (layer) {

                    let geolocation = new BMap.Geolocation();
                    // 开启SDK辅助定位
                    geolocation.enableSDKLocation();
                    geolocation.getCurrentPosition(function (r) {
                        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                            theLocation(r.point.lng, r.point.lat)
                        } else {
                            layer.msg('failed' + this.getStatus());
                        }
                    });


                    function theLocation(lng, lat) {
                        // 创建地理编码实例, 并配置参数获取乡镇级数据
                        let myGeo = new BMap.Geocoder({
                            extensions_town: true
                        });
                        // 根据坐标得到地址描述
                        myGeo.getLocation(new BMap.Point(lng, lat), function (result) {
                            if (result) {
                                that.address = result.address
                            }
                        });
                    }
                });
            },
            up(data, color3, color4) {
                let that = this;
                that.isHit = true;
                style($(".up"), $(".icon"), $(".upCard"), data, color3, color4);
            },
            down(data, color3, color4) {
                let that = this;
                that.downDetails = true;
                style($("#down"), $("#iconDown"), $("#downCard"), data, color3, color4);
            },
            change(data, color1, color2) {
                orginStyle($("#down"), $("#iconDown"), $("#downCard"), data, color1, color2);
            },
            start() {
                this.timeOutEvent = setTimeout(() => {
                    this.timeOutEvent = 0;
                    //真正长按后应该执行的内容
                    let that = this;
                    layui.use(['form', 'layer', 'comExt'], function (form, layer, comExt) {
                        //屏幕可用工作区宽
                        const clientWidth = window.screen.availWidth;
                        const wid = clientWidth + "px";
                        //屏幕可用工作区高
                        const clientHeight = window.screen.availHeight;
                        const hei = clientHeight + "px";
                        var index = layer.open({
                            title: "打卡详情",
                            type: 2,
                            anim: -1,
                            content: "recordInfo.html",
                            area: [wid, hei],
                            success: function (layero, index) {
                                let body = layui.layer.getChildFrame('body', index);
                                switch (that.record.status) {
                                    case 0:
                                        that.record.status = "正常";
                                        break;
                                    case 1:
                                        that.record.status = "迟到";
                                        break;
                                    case 2:
                                        that.record.status = "早退";
                                        break;
                                    case 3:
                                        that.record.status = "旷工";
                                        break;
                                }
                                comExt.fillInput(body, that.record);
                            }
                        });
                        comExt.full(index);
                        /* 渲染表单 */
                        form.render();
                    })
                }, 500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
                return false;
            },
            //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
            move() {
                clearTimeout(this.timeOutEvent);//清除定时器
                this.timeOutEvent = 0;
                let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            },
        },
        mounted() {
            const that = this;
            $.ajax({
                url: "../record/" + parseInt(Base64.decode(getToken())),
                async: false,
                type: 'get',
                success: function (data) {
                    if (data.obj) {
                        that.record = data.obj;
                    }
                }
            });

        }
    });

    setTimeout(function () {
        initStyle(app.record);
    }, 100);


    //样式
    function initStyle(data) {
        if (data.status === 0) {
            commonStyle(data, "正常", "正常", "#778899", "#FF8C00", "#5DF752", "#216AF2")
        } else if (data.status === 1) {
            commonStyle(data, "迟到", "迟到", "#778899", "#FF0000", "#FFFF00", "#216AF2")
        } else if (data.status === 2) {
            commonStyle(data, "早退", "早退", "#778899", "#FF8C00", "#FF8C00", "#216AF2")
        } else if (data.status === 3) {
            commonStyle(data, "旷工", "旷工", "#778899", "#FF8C00", "#FF0000", "#216AF2")
        }

    }

    function commonStyle(data, data1, data2, color1, color2, color3, color4) {
        if (null != data.begintime) {
            app.up(data1, color3, color4);
            console.log("data.begintime", data.begintime);
            if (null != data.endtime) {
                setTimeout(function () {
                    app.down(data2, color3, color4)
                }, 10);
            } else {
                let begin = data.begintime.toString().substring(0, 10);

                if (getCurrentDate() == begin) {
                    setTimeout(function () {
                        app.change("", color1, color2)
                    }, 10);
                } else {
                    setTimeout(function () {
                        app.change("缺卡", color1, color2)
                    }, 10);
                }

            }
        }
    }

    let records = {};

    //打卡日历
    let layDate = layui.laydate.render({
        elem: '#hitCardCalendar',
        format: 'yyyy-MM-dd',
        value: new Date(),
        // isInitValue: false, //是否允许填充初始值，默认为 true
        closeStop: '#hitCardCalendar', //这里代表的意思是：点击所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
        trigger: 'click',
        showBottom: false,
        mark: records,
        max: getCurrentTimeNum(),
        ready: function (date) {
            $("#hitCardCalendar").html("&nbsp;打卡日历");
        }, done: function (value, date, endDate) {
            // console.log(value); //得到日期生成的值，如：2017-08-18
            $.ajax({
                url: "../record/n/" + parseInt(Base64.decode(getToken())) + "?name=" + value,
                async: false,
                success: function (data) {
                    console.log("点击...", data);
                    initStyle(data.obj);
                }
            });
        }
    });

    setTimeout(function () {
        $(function () {
            $.ajax({
                url: "../record/all/" + parseInt(Base64.decode(getToken())),
                async: false,
                success: function (data) {
                    records = data.obj;
                    layDate.config.mark = data.obj
                }
            });
        });
    }, 10);


    //打卡上班
    $(document).on("click", ".up", function (e) {
        app.getAddress();
        setTimeout(function () {
            common("up", $(".up"), $(".icon"), $(".upCard"))
        }, 500);

    });

    //打卡下班
    $(document).on("click", ".down", function (e) {
        app.getAddress();
        setTimeout(function () {
            common("down", $("#down"), $("#iconDown"), $("#downCard"))
        }, 500);
    });


    function common(path, $target, $icon, $card) {

        let location = app.address;
        console.log("location", location);
        $.ajax({
            url: "../record/" + path + "/" + parseInt(Base64.decode(getToken())) + "?location=" + location,
            async: false,
            success: function (data) {
                // console.log(data);
                if (data.success) {
                    style($target, $icon, $card, data.obj);
                    app.isHit = data.success;
                    window.location.reload();
                    layer.msg(
                        data.msg,
                        {
                            icon: 1,
                            time: 1000
                        },
                        function () {

                        });
                } else {
                    app.start();
                }
            }
        })
    }

    function style($target, $icon, $card, data, color3, color4) {
        // "#90F5A7" "#216AF2"
        $target.css({"background-color": color3});
        $icon.removeClass("layui-icon layui-icon-camera");
        $icon.addClass("layui-icon layui-icon-ok");
        $icon.css({"color": color4});
        $card.css({"color": color4});
        $card.text(data)
    }

    function orginStyle($target, $icon, $card, data, color3, color4) {
        // "#778899""#FF8C00"
        $target.css({"background-color": color3});
        $icon.removeClass("layui-icon layui-icon-ok");
        $icon.addClass("layui-icon layui-icon-camera");
        $icon.css({"color": color4});
        $card.css({"color": color4});
        $card.text(data)
    }

    //获取当前时间
    function getCurrentTimeNum() {
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();

        if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
        }
        return "" + hours + minutes + seconds;
    }

    //获取当前年月日
    function getCurrentDate() {
        let date = new Date();
        let seperator1 = "-";
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
            day = "0" + day;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + day;
        return currentdate;
    }
});